
import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { asyncRoutes } from '@/router/index'
NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiltList = ['/login', '/404']
// 路由前置守卫
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()
  // 检测是否有token
  if (store.getters.token) {
    if (to.path === '/login') {
      // 关闭进度条
      NProgress.done()
      next('/')
    } else {
      // token存在 (登录过了) && 获取用户资料 → 存储
      // 判断是否获取过用户信息 → 没有 → 派发了一个action → 提交请求 → 存数据
      if (!store.getters.userId) {
        // 获取对应的权限 menus 页面访问权限 / points 按钮操作权限
        const { roles } = await store.dispatch('user/getUserInfo')
        console.log('登录用户的权限点', roles)
        // 2.筛选出动态路由 - 根据当前角色的权限
        console.log('asyncRoutes', asyncRoutes)
        const newRoutes = asyncRoutes.filter(item => {
          // 判断路由的name信息 是否在当前角色的权限点中
          // 如果存在 保留 后续添加到路由表
          return roles.menus.includes(item.name)
        })
        store.commit('user/setRouters', newRoutes)
        // 3.添加到路由表中 - 正常访问
        // 由于 path * 404 是一个兜底方案 所以一定要放在路由表的最后 ...
        router.addRoutes([...newRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 4. vue-router 3.xx 的版本问题:
        // 动态添加路由信息之后，必须得转发一下 next(to.path)，才能让路由重新拥有信息 (解析)
        next(to.path)
      } else {
        next()
      }
    }
  } else {
    if (whiltList.includes(to.path)) {
      next()
    } else {
      // 关闭进度条
      NProgress.done()
      next('/login')
    }
  }
})

// 问题：拦截到某个页面 登录 / 首页 → 进度条不消失
// 原因：主动拦截,不会执行路由后置守卫
// 解决：手动关闭进度条

// 路由后置守卫
router.afterEach((to, from) => {
  // console.log('路由后置守卫', to)
  // if(to.meta && to.meta.title) {}
  if (to.meta?.title) {
    document.title = `上海鸿蒙6期 - ${to.meta.title}`
  }
  // 关闭进度条
  NProgress.done()
})
